/* 微博报表页面 */
import React from 'react';
import {toJS} from 'mobx';
import { inject, observer } from 'mobx-react';
import { Tools, Popover } from 'weaver-mobile';
import { TabPage } from 'weaver-mobile-page';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
import MyReport from './MyReport';
import ConcernReport from './Concern';
import DefReport from './DefReport';

const getLabel = Tools.getLabel;
const store = [
  'blogHomeStore',
  'blogReportStore',
]

@withRouter
@inject(...store)
@observer
export default class BlogReport extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-report'
  }

  constructor(props) {
    super(props);
    this.state = {
      page: 0,
      popoverVisible: false, // 气泡三个点显隐
      popoverItemVisible: false,
      overlayTask: 0, //控制气泡中显示的内容 0:统计视图，1：明细视图
      tempId:'1',
    }
  }
  
  componentDidMount() {
    const { blogReportStore : { getMyBlogReport, getAttentionReport,getMyBlogReportList } } = this.props;
    let date = new Date();
    getMyBlogReportList();
    getMyBlogReport({ year:date.getFullYear(), month:(date.getMonth()+1) });
    getAttentionReport({ recordType:'blog', year:date.getFullYear(), month:(date.getMonth()+1) }); 
    this.props.blogHomeStore.setState({hidden: false});
      if(window.location.href.indexOf("blogReport/concern")>0){
          this.setState({popoverVisible:true});
      }
  }

  // 根据路由获得当前的page
  getPage = (tab) => {
    const path = this.props.location.pathname;
    console.log("tab",tab)
    switch(path) {
      case '/blogReport/myReport': return 0;
      case '/blogReport/concern': return 1;
      case '/blogReport/defReport': return  tab.key;
      default : return;
    }
  }
  
  onSelect = (opt) => {
    //let optName = opt.props.children.join('');
    if(opt.key === 'mingxi') {
      this.setState({overlayTask: 1, popoverItemVisible:false});
    } else{
      this.setState({overlayTask: 0, popoverItemVisible:false});
    } 
  }

  changeTab = (index,tab) => {
    const { blogReportStore : { getDefReport} } = this.props;
    let date = new Date();
    switch(index) {
      case 0: this.props.history.push('/blogReport/myReport'); this.setState({popoverVisible: false}); break;
      case 1: this.props.history.push('/blogReport/concern'); this.setState({popoverVisible: true}); break;
      default:this.props.history.push('/blogReport/DefReport');getDefReport({"tempId":tab.key, recordType:'blog', year:date.getFullYear(), month:(date.getMonth()+1) });  this.setState({popoverVisible: true,tempId:tab.key});
    }
  }

  render()  {

    const { prefixCls,blogReportStore : { reportList} } = this.props;
    const { popoverVisible, overlayTask, popoverItemVisible,tempId } = this.state;
    const tabs = [];
    let reportListTitle =  toJS(reportList);
    if(Object.keys(reportListTitle).length==0){
      return <div></div>;
    }
     let obj = {};
     for(let j = 0; j < reportListTitle.length; j++) {
       obj = new Object();
      obj.title = reportListTitle[j].title;
      obj.key = reportListTitle[j].key;
      tabs.push(obj)
    }
    const popoverProps = {
      overlay : [(overlayTask === 0 ? 
      <Popover.Item key='mingxi'>{getLabel(390713,'明细视图')}</Popover.Item> : 
      <Popover.Item key='tongji'>{getLabel(390712,'统计视图')}</Popover.Item>
      )],
      onSelect : this.onSelect,
      visible : popoverItemVisible
    },
    tabProps = {
      onTabClick:  (tab) => {
        this.getPage(tab)
      },
      onChange: (tab,index) => {this.changeTab(index,tab)},
    }
    
    return (
      <div className={`${prefixCls} blog-myReport`}>
        <TabPage 
          tabs={tabs}
          tabProps={tabProps}
          popover={popoverVisible}
          popoverProps={popoverProps}
        />
        <Switch>
          <Route
            key="myReport"
            path="/blogReport/myReport"
            render={() => <MyReport />}
          />
          <Route
            key="concern"
            path="/blogReport/concern"
            render={() => <ConcernReport overlayTask={overlayTask}/>}
          />
           <Route
            key={tempId}
            path="/blogReport/defReport"
            render={() => <DefReport overlayTask={overlayTask} tempId = {tempId}  />}
          />
          <Redirect exact path="/blogReport" to={{pathname: '/blogReport/myReport'}} />
        </Switch>
      </div>
    )
  }
}